<template>
  <div class="category">
    <!-- 按钮开始 -->
      <el-button @click="showHandler" size='small' type="primary">新增</el-button>
    <!-- 按钮结束 -->
    <!-- 表格开始 -->
            <el-table
            :data="categorys"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="序号"
                width="90"
                align='center'>
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称" align='center'>
            </el-table-column>
            <el-table-column
                prop="name"
                label="值" align='center'>
            </el-table-column>
            <el-table-column prop="num" label="介绍" align='center'>
                </el-table-column>
            
            <el-table-column with='160px' prop="address" label="操作" align='center'>
                <template slot-scope="scope">
                    <el-button @click='editHandler(scope.row)' size="mini" type="primary">编辑</el-button>
                    <el-button @click="deleteHandler(scope.row.id)" size="mini" type="danger">删除</el-button>
                    <el-button @click="detailsHandler(scope.row.id)" size="mini" type="danger">详情</el-button>
                </template>
            </el-table-column>
            </el-table>
        <!-- 表格结束 -->
        <!-- 分页开始 -->
        <div class="pagination">
            <el-pagination
                layout="prev, pager, next"
                :page-size="list.pageSize"
                :total="total"
                @current-change='changeHandler'>
            </el-pagination>
        </div>
        <!-- 分页结束 -->
        <!-- 模态框开始 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <!-- 表单开始 -->
          <!-- 表单开始 -->
              <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                 <el-form-item label="介绍" prop="realname">
                  <el-input v-model="ruleForm.realname"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                  <el-input v-model="ruleForm.telephone"></el-input>
                </el-form-item>
                <el-form-item label="值" prop="name">
                  <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                
              </el-form>
          <!-- 表单结束 -->
        <div slot="footer" class="dialog-footer">
          <el-button size='mini' @click="dialogFormVisible = false">取 消</el-button>
          <el-button  size='mini' type="primary" @click="submitHandler">确 定</el-button>
        </div>
      </el-dialog>
        <!-- 模态框结束 -->
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
  data(){
    return {
      list:{
        page:1,
        pageSize:3
      },
      radio:'1',
      dialogFormVisible:false,
      ruleForm:{},
      title:'新增基础设置'
    }
  },
  computed:{
    ...mapState('category',['categorys','total'])
  },
  methods:{
    ...mapActions('category',['findAllCategory','saveCategory','deleteCategory']),
      //分页
    changeHandler(page){
      this.list.page = page
      this.findAllCategory(this.list)
    },
    //添加栏目信息
    showHandler(){
      this.dialogFormVisible=true
    },
    //提交保存
    submitHandler(){
      this.saveCategory(this.ruleForm).then(res=>{
        // console.log(res.data.list,'//////');
        if(res.status===200){
          this.dialogFormVisible=false
          this.findAllCategory(this.list)
          this.$message({
            type:'success',
            message:res.message
          })
        }else{
           this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },
    //编辑栏目信息
    editHandler(data){
      //将当前行的内容赋值给我们的ruleForm
      this.ruleForm=data
      // this.title='编辑顾客信息'
      //打开模态框
      this.dialogFormVisible=true
    },
    //删除栏目信息
    deleteHandler(id){
      //  alert(id)
       let params={
         id
       }
       this.deleteCategory(params).then(res=>{
         if(res.status===200){
           this.findAllCategory(this.list)
           this.$message({
             type:'success',
             message:res.message
           })
         }else{
           this.$message({
             type:'error',
             message:res.message
           })
         }
       })
    },
  
    
  },
  created(){
    this.findAllCategory(this.list)
  }
}
</script>
<style scoped>
.pagination {
  float:right;
}
</style>

